<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <el-form-item label="事项搜索：">
          <el-input v-model="listPram.matterName" placeholder="请输入事项名称" clearable class="selWidth"/>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item class="el-form-item-align-right">
          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="handlerOpenEdit(0)" v-hasPermi="['admin:supervise:supervision:save']">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="listData.list" class="table" v-loading="loading" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column
          prop="id"
          label="ID"
          width="50"
        />
        <el-table-column
            prop="matterName"
            label="事项名称"
            min-width="150"
        />
        <el-table-column
            prop="unit"
            label="责任单位"
            min-width="100"
        />
        <el-table-column
          label="责任书记"
          min-width="100"
        >
          <template slot-scope="scope">{{scope.row.dutyNameText | filterEmpty}}</template>
        </el-table-column>
        <el-table-column
          prop="duties"
          label="职务"
          min-width="100"
        >
          <template slot-scope="scope">{{scope.row.name}} {{scope.row.duties}}</template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          min-width="100"
        />
        <el-table-column
          label="完成时限"
          min-width="100"
        >
          <template slot-scope="scope">{{scope.row.completeTime | filterEmpty}}</template>
        </el-table-column>
        <el-table-column label="进展情况" min-width="100">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handlerOpenRead(scope.row.id)" v-hasPermi="['admin:supervise:supervision:info']">
              <span style="color:#1890ff">查看</span>
            </el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="状态" prop="statusText" min-width="60">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handlerOpenRead(scope.row)" v-hasPermi="['admin:supervise:supervision:info']">
              <span :style="'color:'+handleGetLightColor(scope.row.status)">{{scope.row.statusText}}</span>
            </el-button>
          </template>
        </el-table-column> -->
<!--        <el-table-column label="排序" prop="sort" min-width="50"/>-->
        <el-table-column label="操作" min-width="195" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="handlerOpenEdit(1,scope.row)" v-hasPermi="['admin:supervise:supervision:info']">编辑</el-button>
            <el-button icon="el-icon-refresh" type="success" size="mini" @click="updateStatus(scope.row.id)" v-hasPermi="['admin:supervise:supervision:update:status']">添加进展情况</el-button>
            <el-button icon="el-icon-delete" type="danger" size="mini" @click="handlerOpenDel(scope.row)" v-hasPermi="['admin:supervise:supervision:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!--新增/编辑-->
    <el-dialog
      :visible.sync="editDialogConfig.visible"
      :title="editDialogConfig.isCreate === 0? '创建督查事项':'编辑督查事项'"
      destroy-on-close
      :close-on-click-modal="false"
      width="700px"
    >
      <edit
        v-if="editDialogConfig.visible"
        :is-create="editDialogConfig.isCreate"
        :edit-data="editDialogConfig.editData"
        :all-position-list="positionList"
        :all-duty-name-list="dutyNameList"
        @hideEditDialog="hideEditDialog"
      />
    </el-dialog>
    <!--状态更新-->
    <el-dialog
        title="添加进展情况"
        :visible.sync="VisibleStatus"
        width="900px"
        :close-on-click-modal="false"
        :before-close="handleStatusClose">
      <el-form :model="statusValidateForm" :rules="rules" ref="statusValidateForm" label-width="90px" class="demo-dynamic" v-loading="loadingStatus">
        <el-form-item
            label="内容"
            prop="content"
        >
          <el-input v-model="statusValidateForm.content" type="textarea" :rows="10" placeholder="内容"/>
<!--          <Tinymce v-model="statusValidateForm.remarks" :height="200"></Tinymce>-->
        </el-form-item>
        <el-form-item label="日期" prop="time">
          <el-date-picker v-model="statusValidateForm.time" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placement="bottom-end" @change="onchangeTime" placeholder="日期"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleStatusClose">取 消</el-button>
        <el-button type="primary" :loading="loadingBtn" @click="submitStatusForm('statusValidateForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!--状态更新历史记录-->
    <el-dialog
        title="进展情况"
        :visible.sync="dialogVisible"
        :before-close="Close"
        width="900px"
    >
      <el-table :data="processList" v-loading="loading" height="500px" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column label="时间" prop="time" min-width="60"/>
        <el-table-column label="内容" prop="content" min-width="300">
          <template slot-scope="scope">
            <div>{{scope.row.content}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="60" align="center" fixed="right">
          <template slot-scope="scope">
<!--            <el-button icon="el-icon-edit" type="primary" size="mini" @click="handlerOpenEdit(1,scope.row)" v-hasPermi="['admin:supervise:supervision:update:status']">编辑</el-button>-->
            <el-button type="danger" size="mini" @click="handlerProcessDel(scope.row)" v-hasPermi="['admin:supervise:supervision:update:status']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import edit from './edit'
import { checkPermi } from "@/utils/permission";
import * as selfUtil from "@/utils/ZBKJIutil";
import * as categoryApi from "@/api/categoryApi";
import * as superviseApi from "@/api/superviseApi";
import {Debounce} from "@/utils/validate";
import Tinymce from '@/components/Tinymce/index'
import {categoryProjectStatusList} from "@/api/categoryApi";
import { getLightColor } from "@/utils";
import * as positionApi from "@/api/positionApi";
export default {
  // name: "index"
  components: { edit, Tinymce },
  data() {
    return {
      constants:this.$constants,
      loading:false,
      listData: { list: [] },
      listPram: {
        matterName: '',
        /*ipAddress: null,
        macAddress: null,
        personId: null,*/
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      editDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },

      positionList:{},
      dutyNameList:{},
      id:0,
      Visible:false,

      //状态更新
      VisibleStatus: false,
      statusValidateForm: {
        time: '',
        content: '',
        matterId:0,
      },
      rules: {
        time: [{ required: true, message: '请选择日期', trigger: ['blur', 'change'] }],
        content: [{ required: true, message: '请填进展情况内容', trigger: ['blur'] }],
      },
      loadingStatus: false,
      loadingBtn: false,

      //状态更新记录
      dialogVisible: false,//已读状态dialog
      processList:[],
    }
  },
  mounted() {
    this.handleGetSuperviseList()
    this.initPositionList()
    this.initDutyNameList()
  },
  methods: {
    checkPermi,
    //控制长文本显示和收起
    showMore (row, flag) {
      this.$set(row,'show',flag)
    },
    onchangeTime (e) {
      this.statusValidateForm.time = e;
    },

    handleSearch() {
      this.listPram.page = 1
      this.handleGetSuperviseList()
    },
    handleSizeChange(val) {
      this.listPram.limit = val
      this.handleGetSuperviseList()
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.handleGetSuperviseList()
    },
    handlerOpenDel(rowData) {
      this.$confirm('确认删除当前数据').then(() => {
        const _pram = { id: rowData.id}
        superviseApi.doDel(_pram).then(data => {
          this.$message.success('删除数据成功')
          this.handleGetSuperviseList()
        })
      })
    },
    initPositionList(){
      const _pram = {
        page: 1,
        limit: 1000,
        type: 1,
        //limit: this.constants.page.limit[4],
        //status: 1
      }
      positionApi.getList(_pram).then(data => {
        //let data = this.constants.staticRoleList
        this.positionList = data
      })
    },
    initDutyNameList(){
      const _pram = {
        page: 1,
        limit: 1000,
        type: 2,
        //limit: this.constants.page.limit[4],
        //status: 1
      }
      positionApi.getList(_pram).then(data => {
        //let data = this.constants.staticRoleList
        this.dutyNameList = data
      })
    },

    handleGetSuperviseList() {
      superviseApi.getList( this.listPram ).then(data => {
        this.listData = data
      })
    },
    handleGetLightColor(status){
      return getLightColor(status)
    },

    handlerOpenEdit(isCreate,editDate) {
      this.editDialogConfig.isCreate = isCreate
      this.editDialogConfig.editData = editDate
      this.editDialogConfig.visible = true
    },
    hideEditDialog() {
      this.editDialogConfig.visible = false
      this.handleGetSuperviseList()
    },
    resetQuery(){
      this.listPram.matterName = '';
      this.handleGetSuperviseList()
    },
    handlerProcessDel(rowData) {
      this.$confirm('确认删除当前进展情况数据').then(() => {
        const _pram = { id: rowData.id}
        superviseApi.doProcessDel(_pram).then(data => {
          this.$message.success('删除数据成功')
          this.handlerOpenRead(rowData.matterId)
        })
      })
    },

    //状态更新
    updateStatus(id) {
      this.statusValidateForm = {
        time: '',
        content: '',
        matterId:id,
      }
      this.VisibleStatus = true
    },
    handleStatusClose() {
      this.VisibleStatus = false
      this.statusValidateForm = {
        time: '',
        content: '',
        matterId:0,
      }
    },
    submitStatusForm:Debounce(function(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingBtn = true
          superviseApi.updateStatus(this.statusValidateForm).then(res => {
            this.$message.success('更新成功')
            this.loadingBtn = false
            this.handleStatusClose()
            this.handleGetSuperviseList()
          }).catch(() => {
            this.loadingBtn = false
          })
        } else {
          return false
        }
      })
    }),

    //状态更新记录
    handlerOpenRead(matterId){
      this.loading = true

      superviseApi.getProcessList(matterId).then(data => {
        this.processList = data.list
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })

      /*if (editData.progress){
        this.processList = editData.progress
      }*/
      //this.processList = editDate.processList
      this.dialogVisible = true
    },
    Close() {
      this.dialogVisible = false
    },
  }
}
</script>

<style scoped lang="scss">
  .table .showMore{
    display:block;
    width:100%;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>
